<template>
  <div>
    <selectItem @changeSelect="changeSelect" :formItem="compConfig" :formNamePath="formNamePath"></selectItem>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, nextTick } from "vue";
import selectItem from "../../formitem/select/index.vue";
import formItemForm from "./config";
import { useColumnModel } from "@/components/draggable/hooks/useColumnModel";
import { useModelStore } from "@/store/modules/model/column";
import request from "@/api/index";

const useModel = useModelStore();
const props = defineProps({
  element: [],
  formNamePath: [],
});
const compConfig = ref(JSON.parse(JSON.stringify(formItemForm.component.settings)));
interface dataSourceType {
  [propName: string]: any;
}
const modelData = ref<dataSourceType>({ options: [] });
useColumnModel(
  compConfig,
  computed(() => props.element)
);

const changeSelect = (value: string) => {
  useModel.setData({ param: formItemForm.component.settings.param, value: value });
};
const fetchWorkflowList = async () => {
  let params = {
    flowScene: 1,
  };
  let data = await request.fetchWorkflowList(params);
  data.forEach((item: dataSourceType) => {
    item.label = item.name;
    item.value = item.id;
  });
  nextTick(() => {
    compConfig.value.options = data;
  });

  // modelData.value.options = data;
};
onMounted(() => {
  fetchWorkflowList();
});
</script>

<style lang="less" scoped></style>
